<template>
  <div>
    <div class="putips">视频上传</div>
    <div class="cbg">
      <div class="uploadcontent">




        <ul>
          <li>
            <div class="upimgfile">
              <div class="upImgs" v-if="!$store.state.personInfo.videoattid">
                <img src="./img/upvideopic.png"/>
                <p>上传认证视频</p>
              </div>
              <videoUpload @uploadsucess="videosuccess" v-if="!$store.state.personInfo.videoattid"></videoUpload>
              <div class="upImgSuc videoDemosPro" v-if="$store.state.personInfo.videoattid">
                <div>
                  <video id="myVideo" controls="controls" style="width:100%;"
                          preload="auto"
                         x5-playsinline="" playsinline=""
                         webkit-playsinline="">
                    <source :src="$store.state.baseImgUrl+$store.state.personInfo.videoattid"
                            type="video/mp4"/>
                  </video>


                  <el-button size="mini" type="danger" @click="$store.state.personInfo.videoattid=''" >重新上传</el-button>
                </div>
              </div>
          </div>
          </li>



        </ul>
        <div class="updesc">

          <p>1.非逆光、免冠等常规要求；
            <br>2.正面视频采集 不可仰视或俯视，过检率会降低；
            <br>3.视频需要包含录音，请大声朗读以下数字：
             <span  style="color:#FF4C50; font-weight: bold">
                               1234
                            </span></p>






        </div>
        <div class="videoDemos">视频样例</div>

        <ul>

          <li>

            <div class="upimgfile">
              <div class="upImgs videoDemosPro">
                <video id="myVideo" controls="controls" style="width:100%;"
                       poster='https://renshe.oss-cn-beijing.aliyuncs.com/miniProgram/authentication.png' preload="auto"
                       x5-playsinline="" playsinline=""
                       webkit-playsinline="">
                  <source src="https://renshe.oss-cn-beijing.aliyuncs.com/miniProgram/authentication.mp4"
                          type="video/mp4"/>
                </video>
                <!--<p>上传认证视频</p>-->
              </div>
              <!--<div class="upImgSuc">-->
              <!--<img src="./img/car_jqx.png"/>-->
              <!--</div>-->

            </div>
          </li>

        </ul>
      </div>
    </div>



    <div class="cbg" style="background: none;">
      <div class="txxy">

        <div class="libtn">
          <p></p>
          <button @click="signact()" class="buttonOk">提交</button>
        </div>
      </div>



    </div>

  </div>
</template>

<script>
  export default {
    name: "pcar1",
    data(){
      return{
        radio:'',
        checked:true
      }
    },
    created(){
      var x = localStorage.getItem('tempPer') || ''
      if(x){
        // this.$store.state.personInfo = JSON.parse(x)

        this.$store.commit('setPersonInfo',JSON.parse(x))
      }


    },
    methods:{
      videosuccess(res){

        this.$store.state.personInfo.videoattid=res.data;
        localStorage.setItem('tempPer',JSON.stringify(this.$store.state.personInfo));



      },
      signact() {

        if(!this.$store.state.personInfo.videoattid){
          this.$toast('请按照示例录制视频并上传')
          return  false;
        }

        this.$promot({
          name: 'xuzhi',
          width: '80%',
          title: '用户须知',
          funCode: "xuzhi",
          props: {
            msubInfo: this.$store.state.personInfo
          },
          callback: (close, str) =>{
            close()
            this.okSign()
           }
        })



      },
      okSign(){
        this.$bottomCard({//用工宝签约
          name: 'newqianzi',
          width: '100%',
          title: '手写签字',
          funCode: "newqianzi",
          props: {
            msubInfo: this.$store.state.personInfo
          },
          callback: (close, str) =>{
          close();
        if(str){
          this.$mPromot({
            width: '80%',
            title: '提示',
            funCode: 'comfims',
            props: {
              btn2:'确定',
              info: '<span style="color:red">'+JSON.stringify(str)+'</span>'
            },
            callback: (close,str) => {
            close();
          this.$router.push({
            path:'/personCar',
            query:{
              funCode:'personHome'
            }
          })

        }
        })
        }else{
          this.$router.push({
            path:'/personCar',
            query:{
              funCode:'pcar5'
            }
          })

        }

      }
      })
      },
      gosuces(){
        this.$router.push({
          path:'/personCar',
          query:{
            funCode:'pcar5'
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .videoDemosPro{

    width:100%;
    text-align: center;
  }
  .videosuc{
    text-align: center;

  }
  .upvideo{width:100%; height: 200px;}
  .videoDemos{
    text-align: center;
    padding-top:10px;
  }
  .uptitle{
    text-align: center;
    font-size:14px;
    padding:20px 0;
  }
  .putips{
    background:rgba(237,244,255,1);
    text-align: left;
    line-height: 35px;
    padding:0 20px;
    font-size:18px;
    color:rgba(51,51,51,1);
  }
  .libtn {
    border: none;
    text-align: center;
    .buttonOk {
      padding:10px 0;
      border-radius: 5px;
      border: none;
      background:rgba(28,103,255,1);
      color: #FFF;
      font-size: 35px;
      /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
      width: 90%;
      font-size:18px;
      margin-bottom: 10px;
    }.buttonCancle {
       padding:10px 0;
       border-radius: 5px;

       border:1px solid rgba(191,191,191,1);
       background: #FFF;
       color: #666;
       font-size: 35px;
       /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
       width: 90%;
       font-size:18px;
     }
  }
  .txxy{font-size:12px; color:#999;}
  .zftips{font-size:12px; color: #999; p{margin:0;padding:0;} padding:10px 0;}
  .lbox{
    padding:0 10px;
    li{border-bottom: 1px solid #eee;padding:15px 0; font-size: 14px;
      display: flex;
      .labelName{width:90px;}
      .labelCon{
        width:100%;
      }
    }
  }
  .el-radio{
    margin-right: 10px;
  }
  .setpcon{
    background:rgba(67,140,253,1);
    border-radius:10px;
    img{width:100%;}
    padding:15px 20px;
    margin-bottom: 20px;
  }

  .upImgs{
    img{height:150px; opacity: .8}
    text-align: center;
    p{
      text-align: center;
      margin:0;padding:0;font-size:14px;color:#999;
    }
    margin:5px;
  }
  .upImgSuc{
    margin:5px;
    overflow: hidden;
    img{height:170px; width:100%; }
  }
  .updesc{font-size:12px; color:#999; margin-top:15px;}

  .cbg{margin-bottom:10px;padding:10px; background: #FFF;}
  .uploadcontent{
    h3{
      font-size:18px;
      position: relative;
      margin:0;padding: 0;
      font-weight: 400;
      color:rgba(51,51,51,1);
      margin-bottom: 10px;
      .cdemo{font-size:14px; position: absolute; right:10px; top:5px; font-weight:normal; color:#1C67FF;}
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      padding:5px 0;
      li{
        width:100%;
        margin-bottom: 20px;
        .upimgfile{
          background:rgba(245,248,255,1);
          margin:0 5px;
          border-radius: 8px;
          padding:5px;
          position: relative;
        }
      }
    }

  }
</style>
